<template>
  <t-dialog :visible.sync="visible" header="编 辑" :width="'50%'" @confirm="handleConfirm" @cancel="handleCancel"
    @close="handleCancel">
    <t-form ref="formRef" :data="form" :rules="rules">
      <t-row>
        <t-col :span="12">
          <t-form-item label="姓名" name="nickname" required>
            <t-input v-model="form.nickname" placeholder="请输入" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="手 机" name="mobile">
            <t-input v-model="form.mobile" placeholder="请输入" clearable />
          </t-form-item>
        </t-col>
      </t-row>
      <t-form-item label="邮箱" name="email">
        <t-input v-model="form.email" placeholder="请输入" clearable />
      </t-form-item>
      <t-row>
        <t-col :span="12">
          <t-form-item label="部门" name="deptId">
            <t-select v-model="form.deptId" placeholder="请选择" clearable>
              <t-option v-for="(item, index) in deptOptions" :key="index" :value="item.value" :label="item.label" />
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="岗位" name="postIds">
            <t-select v-model="form.postIds" placeholder="请选择" clearable multiple>
              <t-option v-for="(item, index) in postOptions" :key="index" :value="item.value" :label="item.label" />
            </t-select>
          </t-form-item>
        </t-col>
      </t-row>
      <t-form-item label="备注" name="remark">
        <t-textarea v-model="form.remark" placeholder="请输入" :height="124" clearable />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose } from 'vue';
import { MessagePlugin, FormRules } from 'tdesign-vue-next';
import { update, getById, } from '@/api/userCenter/dept/staff';
import { getList as getDeptList } from '@/api/userCenter/dept/dept';
import { getList as getPostList } from '@/api/userCenter/dept/post';
const visible = ref?.(false);
const loading = ref?.(false);
const formRef = ref?.(null);
// 部门选项
const deptOptions = ref?.([]);
// 岗位选项
const postOptions = ref?.([]);
// 表单数据
const form = ref?.({
  id: '',
  username: '',
  nickname: '',
  deptId: '',
  postIds: [],
  email: '',
  mobile: '',
  gender: 0,
  avatar: '',
  remark: ''
});
// 表单验证规则
const rules: FormRules = {
  nickname: [{ required: true, message: '请输入姓名', type: 'error' }],
  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手 机', type: 'error' }],
  email: [{ pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '请输入正确的邮箱', type: 'error' }]
};
// 获取部门列表
const fetchDeptOptions = async () => {
  const deptList = await getDeptList();
  deptOptions.value = deptList.map(item => ({
    label: item.name,
    value: item.id
  }));
};
// 获取岗位列表
const fetchPostOptions = async () => {
  const postList = await getPostList();
  postOptions.value = postList.map(item => ({
    label: item.name,
    value: item.id
  }));
};
const handleConfirm = async () => {
  if (!formRef.value) return;
  const validateResult = await formRef?.value?.validate?.();
  if (validateResult !== true) {
    return;
  }
  loading.value = true;
  try {
    const data = form.value as unknown;
    await update(form.value);
    MessagePlugin?.success?.(`操作成功`);
    visible.value = false;
    emit?.('success');
    formRef?.value?.reset();
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};
const handleCancel = () => {
  visible.value = false;
};
const openDialog = async (id?: string) => {
  // 获取部门和岗位选项
  await Promise.all([fetchDeptOptions(), fetchPostOptions()]);
  visible.value = true;
  if (id) {
    loading.value = true;
    form.value.id = id;
    const staffData = await getById(id);
    if (staffData) {
      form.value = staffData;
    }
    loading.value = false;
  } else {
    // 新增时重置表单
    form.value = {
      id: '',
      username: '',
      nickname: '',
      deptId: '',
      postIds: [],
      email: '',
      mobile: '',
      gender: 0,
      avatar: '',
      remark: ''
    };
  }
};
defineExpose({
  openDialog,
});
const emit = defineEmits(['success']);
</script>
<style lang="less" scoped>
/* 可以在这里添加自定义样式 */
</style>
